<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>考试之路 - 简化版</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            margin: 0;
            padding: 0;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #333;
            overflow: hidden;
        }
        
        .game-container {
            width: 100vw;
            height: 100vh;
            position: relative;
        }
        
        .screen {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        
        .screen.active {
            display: flex;
        }
        
        .menu-content {
            text-align: center;
            max-width: 600px;
            padding: 20px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 15px;
        }
        
        .game-title {
            font-size: 2.5rem;
            color: #333;
            margin-bottom: 20px;
        }
        
        .character-cards {
            display: flex;
            gap: 20px;
            justify-content: center;
            margin: 30px 0;
            flex-wrap: wrap;
        }
        
        .character-card {
            background: white;
            border-radius: 10px;
            padding: 20px;
            width: 150px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 3px solid transparent;
        }
        
        .character-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.3);
        }
        
        .character-card.selected {
            border-color: #4CAF50;
            background: #e8f5e8;
        }
        
        .character-avatar {
            width: 60px;
            height: 60px;
            background: linear-gradient(45deg, #FF6B6B, #4ECDC4);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            font-weight: bold;
            color: white;
            margin: 0 auto 15px;
        }
        
        .btn-primary {
            background: linear-gradient(45deg, #4CAF50, #45a049);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            margin: 10px;
        }
        
        .btn-primary:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(76, 175, 80, 0.4);
        }
        
        .btn-primary:disabled {
            background: #ccc;
            cursor: not-allowed;
        }
        
        .game-header {
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 15px 20px;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .player-stats {
            display: flex;
            gap: 20px;
            font-size: 1.1rem;
        }
        
        .health { color: #ff6b6b; }
        .energy { color: #4ecdc4; }
        .gold { color: #ffd93d; }
        
        .game-content {
            flex: 1;
            width: 100%;
            display: flex;
            flex-direction: column;
            padding: 20px;
        }
        
        .battle-area {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .enemy-area {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            min-height: 200px;
        }
        
        .enemy {
            background: linear-gradient(45deg, #ff6b6b, #ee5a52);
            color: white;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            min-width: 150px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }
        
        .enemy-name {
            font-size: 1.2rem;
            font-weight: bold;
            margin-bottom: 10px;
        }
        
        .enemy-health {
            background: rgba(255, 255, 255, 0.3);
            border-radius: 10px;
            padding: 5px;
            margin-bottom: 10px;
        }
        
        .player-area {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            padding: 20px;
        }
        
        .hand {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            justify-content: center;
        }
        
        .card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 10px;
            padding: 15px;
            min-width: 120px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 3px 10px rgba(0,0,0,0.3);
            text-align: center;
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.4);
        }
        
        .card-name {
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .card-cost {
            background: rgba(255, 255, 255, 0.3);
            border-radius: 15px;
            padding: 2px 8px;
            font-size: 0.8rem;
            margin-bottom: 8px;
            display: inline-block;
        }
        
        .card-description {
            font-size: 0.9rem;
            line-height: 1.3;
        }
        
        .action-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 20px;
        }
        
        .btn-secondary {
            background: linear-gradient(45deg, #2196F3, #1976D2);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .btn-secondary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(33, 150, 243, 0.4);
        }
        
        /* 战斗日志 */
        .battle-log {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            padding: 20px;
            margin-top: 20px;
            max-height: 200px;
            overflow-y: auto;
        }
        
        .battle-log h3 {
            color: white;
            margin-bottom: 15px;
            font-size: 1.2rem;
        }
        
        .log-content {
            background: rgba(0, 0, 0, 0.3);
            border-radius: 8px;
            padding: 15px;
            max-height: 150px;
            overflow-y: auto;
        }
        
        .log-entry {
            color: white;
            margin-bottom: 8px;
            padding: 5px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            font-size: 0.9rem;
        }
        
        .log-entry:last-child {
            border-bottom: none;
        }
        
        .log-entry.player-action {
            color: #4CAF50;
        }
        
        .log-entry.enemy-action {
            color: #ff6b6b;
        }
        
        .log-entry.system {
            color: #ffd93d;
        }
        
        .log-entry.turn-start {
            color: #2196F3;
            font-weight: bold;
        }
        
        /* 地图界面 */
        .map-header {
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 15px 20px;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .map-content {
            flex: 1;
            width: 100%;
            display: flex;
            flex-direction: column;
            padding: 20px;
            overflow-y: auto;
        }
        
        .map-title {
            text-align: center;
            color: white;
            font-size: 2rem;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
        }
        
        .map-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
            padding: 20px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            margin-bottom: 20px;
        }
        
        .map-floor {
            display: flex;
            justify-content: center;
            gap: 30px;
            flex-wrap: wrap;
            width: 100%;
            margin-bottom: 20px;
        }
        
        .floor-label {
            color: white;
            font-size: 1.2rem;
            font-weight: bold;
            margin-bottom: 10px;
            text-align: center;
            width: 100%;
        }
        
        .map-node {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            font-weight: bold;
            color: white;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
        }
        
        .map-node:hover {
            transform: scale(1.1);
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }
        
        .map-node.available {
            opacity: 1;
        }
        
        .map-node.unavailable {
            opacity: 0.3;
            cursor: not-allowed;
        }
        
        .map-node.visited {
            opacity: 0.6;
        }
        
        .map-node.current {
            transform: scale(1.2);
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
        }
        
        /* 节点类型样式 */
        .battle-node {
            background: linear-gradient(45deg, #ff6b6b, #ee5a52);
        }
        
        .hanfu-node {
            background: linear-gradient(45deg, #4CAF50, #45a049);
        }
        
        .shop-node {
            background: linear-gradient(45deg, #2196F3, #1976D2);
        }
        
        .map-legend {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
            background: rgba(255, 255, 255, 0.1);
            padding: 15px;
            border-radius: 10px;
        }
        
        .legend-item {
            display: flex;
            align-items: center;
            gap: 8px;
            color: white;
            font-size: 0.9rem;
        }
        
        .legend-icon {
            width: 20px;
            height: 20px;
            border-radius: 50%;
        }
        
        .battle-icon {
            background: linear-gradient(45deg, #ff6b6b, #ee5a52);
        }
        
        .hanfu-icon {
            background: linear-gradient(45deg, #4CAF50, #45a049);
        }
        
        .shop-icon {
            background: linear-gradient(45deg, #2196F3, #1976D2);
        }
    </style>
</head>
<body>
    <div class="game-container">
        <!-- 主菜单 -->
        <div id="main-menu" class="screen active">
            <div class="menu-content">
                <h1 class="game-title">考试之路</h1>
                <p>人生就是一场场考试</p>
                <div class="character-cards">
                    <div class="character-card" data-character="xu">
                        <div class="character-avatar">旭</div>
                        <h3>旭 (男人)</h3>
                        <p>力量型角色<br>高伤害，但行动缓慢</p>
                    </div>
                    <div class="character-card" data-character="ling">
                        <div class="character-avatar">玲</div>
                        <h3>玲 (女人)</h3>
                        <p>敏捷型角色<br>快速攻击，频率高</p>
                    </div>
                    <div class="character-card" data-character="che">
                        <div class="character-avatar">澈</div>
                        <h3>澈 (小孩)</h3>
                        <p>成长型角色<br>可成长，状态丰富</p>
                    </div>
                </div>
                <button id="start-game" class="btn-primary" disabled>开始游戏</button>
            </div>
        </div>

        <!-- 地图界面 -->
        <div id="map-screen" class="screen">
            <div class="map-header">
                <div class="player-info">
                    <div class="player-stats">
                        <span class="health">❤️ <span id="map-player-health">100</span></span>
                        <span class="energy">⚡ <span id="map-player-energy">3</span></span>
                        <span class="gold">💰 <span id="map-player-gold">0</span></span>
                    </div>
                    <div class="floor-info">
                        <span>第 <span id="map-current-floor">1</span> 层</span>
                    </div>
                </div>
            </div>
            
            <div class="map-content">
                <h2 class="map-title">考试之路</h2>
                <div id="map-container" class="map-container">
                    <!-- 地图节点将在这里显示 -->
                </div>
                <div class="map-legend">
                    <div class="legend-item">
                        <div class="legend-icon battle-icon"></div>
                        <span>战斗</span>
                    </div>
                    <div class="legend-item">
                        <div class="legend-icon hanfu-icon"></div>
                        <span>汉府</span>
                    </div>
                    <div class="legend-item">
                        <div class="legend-icon shop-icon"></div>
                        <span>商店</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 游戏主界面 -->
        <div id="game-screen" class="screen">
            <div class="game-header">
                <div class="player-info">
                    <div class="player-stats">
                        <span class="health">❤️ <span id="player-health">100</span></span>
                        <span class="energy">⚡ <span id="player-energy">3</span></span>
                        <span class="gold">💰 <span id="player-gold">0</span></span>
                    </div>
                    <div class="floor-info">
                        <span>第 <span id="current-floor">1</span> 层</span>
                    </div>
                </div>
            </div>

            <div class="game-content">
                <div class="battle-area">
                    <div class="enemy-area">
                        <div id="enemy-container" class="enemy-container">
                            <!-- 敌人将在这里显示 -->
                        </div>
                    </div>
                    
                    <div class="player-area">
                        <div class="hand-container">
                            <div id="player-hand" class="hand">
                                <!-- 手牌将在这里显示 -->
                            </div>
                        </div>
                    </div>
                </div>

                <div class="action-buttons">
                    <button id="end-turn" class="btn-secondary">结束回合</button>
                    <button id="use-potion" class="btn-secondary">使用药水</button>
                </div>
                
                <!-- 战斗日志 -->
                <div class="battle-log">
                    <h3>战斗日志</h3>
                    <div id="battle-log-content" class="log-content">
                        <!-- 战斗日志将在这里显示 -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 简化的游戏引擎
        class SimpleGame {
            constructor() {
                this.currentScreen = 'main-menu';
                this.selectedCharacter = null;
                this.player = null;
                this.currentEnemies = [];
                this.playerHand = [];
                this.playerDeck = [];
                this.playerDiscardPile = [];
                this.playerExhaustPile = [];
                this.playerGold = 0;
                this.currentFloor = 1;
                this.gameState = 'menu';
            }

            init() {
                this.setupEventListeners();
                this.showScreen('main-menu');
                console.log('简化游戏初始化完成');
            }

            setupEventListeners() {
                // 角色选择
                document.querySelectorAll('.character-card').forEach(card => {
                    card.addEventListener('click', (e) => {
                        this.selectCharacter(e.currentTarget.dataset.character);
                    });
                });

                // 开始游戏
                document.getElementById('start-game').addEventListener('click', () => {
                    this.startGame();
                });

                // 结束回合
                document.getElementById('end-turn').addEventListener('click', () => {
                    this.endTurn();
                });
            }

            selectCharacter(characterType) {
                document.querySelectorAll('.character-card').forEach(card => {
                    card.classList.remove('selected');
                });
                document.querySelector(`[data-character="${characterType}"]`).classList.add('selected');
                this.selectedCharacter = characterType;
                document.getElementById('start-game').disabled = false;
            }

            startGame() {
                if (!this.selectedCharacter) return;

                console.log('开始游戏，角色:', this.selectedCharacter);

                // 创建玩家
                this.player = this.createPlayer(this.selectedCharacter);
                this.playerGold = 0;
                this.currentFloor = 1;
                this.gameState = 'playing';

                // 初始化卡组
                this.initializeDeck();
                
                // 初始化地图
                this.initializeMap();
                
                // 显示地图界面
                this.showMap();
            }

            createPlayer(characterType) {
                const players = {
                    'xu': { name: '旭', maxHealth: 100, health: 100, maxEnergy: 3, energy: 3, maxHandSize: 5 },
                    'ling': { name: '玲', maxHealth: 80, health: 80, maxEnergy: 4, energy: 4, maxHandSize: 6 },
                    'che': { name: '澈', maxHealth: 70, health: 70, maxEnergy: 3, energy: 3, maxHandSize: 4 }
                };
                return players[characterType];
            }

            initializeDeck() {
                this.playerDeck = [
                    { name: '攻击', cost: 1, type: 'attack', damage: 6, description: '造成6点伤害' },
                    { name: '攻击', cost: 1, type: 'attack', damage: 6, description: '造成6点伤害' },
                    { name: '攻击', cost: 1, type: 'attack', damage: 6, description: '造成6点伤害' },
                    { name: '防御', cost: 1, type: 'defend', block: 5, description: '获得5点护甲' },
                    { name: '防御', cost: 1, type: 'defend', block: 5, description: '获得5点护甲' }
                ];
                this.playerDiscardPile = [];
                this.playerExhaustPile = [];
                this.shuffleDeck();
            }

            shuffleDeck() {
                for (let i = this.playerDeck.length - 1; i > 0; i--) {
                    const j = Math.floor(Math.random() * (i + 1));
                    [this.playerDeck[i], this.playerDeck[j]] = [this.playerDeck[j], this.playerDeck[i]];
                }
            }

            // 初始化地图
            initializeMap() {
                this.mapNodes = [];
                this.visitedNodes = new Set();
                this.availableNodes = new Set();
                
                // 生成地图节点
                for (let floor = 1; floor <= 5; floor++) {
                    const floorNodes = [];
                    
                    if (floor === 1) {
                        floorNodes.push({
                            id: `floor-${floor}-battle-1`,
                            type: 'battle',
                            floor: floor,
                            name: '数学考试'
                        });
                    } else {
                        floorNodes.push({
                            id: `floor-${floor}-battle-1`,
                            type: 'battle',
                            floor: floor,
                            name: '语文考试'
                        });
                        floorNodes.push({
                            id: `floor-${floor}-hanfu-1`,
                            type: 'hanfu',
                            floor: floor,
                            name: '汉府'
                        });
                        floorNodes.push({
                            id: `floor-${floor}-shop-1`,
                            type: 'shop',
                            floor: floor,
                            name: '商店'
                        });
                    }
                    
                    this.mapNodes.push(floorNodes);
                }
                
                // 解锁第一层
                this.mapNodes[0].forEach(node => {
                    this.availableNodes.add(node.id);
                });
            }

            // 显示地图
            showMap() {
                this.showScreen('map-screen');
                this.renderMap();
                this.updateMapUI();
            }

            // 渲染地图
            renderMap() {
                const container = document.getElementById('map-container');
                if (!container) return;

                container.innerHTML = '';

                this.mapNodes.forEach((floorNodes, floorIndex) => {
                    const floorDiv = document.createElement('div');
                    floorDiv.className = 'map-floor';
                    floorDiv.innerHTML = `<div class="floor-label">第 ${floorIndex + 1} 层</div>`;

                    const nodesContainer = document.createElement('div');
                    nodesContainer.style.display = 'flex';
                    nodesContainer.style.gap = '20px';
                    nodesContainer.style.justifyContent = 'center';
                    nodesContainer.style.marginBottom = '20px';

                    floorNodes.forEach(node => {
                        const nodeElement = this.createMapNode(node);
                        nodesContainer.appendChild(nodeElement);
                    });

                    floorDiv.appendChild(nodesContainer);
                    container.appendChild(floorDiv);
                });
            }

            // 创建地图节点
            createMapNode(node) {
                const nodeDiv = document.createElement('div');
                nodeDiv.className = `map-node ${node.type}-node`;
                nodeDiv.id = node.id;
                nodeDiv.textContent = this.getNodeText(node);

                // 设置节点状态
                if (this.visitedNodes.has(node.id)) {
                    nodeDiv.classList.add('visited');
                } else if (this.availableNodes.has(node.id)) {
                    nodeDiv.classList.add('available');
                } else {
                    nodeDiv.classList.add('unavailable');
                }

                // 添加点击事件
                nodeDiv.addEventListener('click', () => {
                    if (this.availableNodes.has(node.id)) {
                        this.handleNodeClick(node);
                    }
                });

                return nodeDiv;
            }

            // 获取节点文本
            getNodeText(node) {
                switch (node.type) {
                    case 'battle':
                        return '战';
                    case 'hanfu':
                        return '汉';
                    case 'shop':
                        return '商';
                    default:
                        return '?';
                }
            }

            // 处理节点点击
            handleNodeClick(node) {
                console.log('点击节点:', node);
                
                // 标记为已访问
                this.visitedNodes.add(node.id);
                this.availableNodes.delete(node.id);

                // 根据节点类型执行操作
                switch (node.type) {
                    case 'battle':
                        this.startBattle();
                        break;
                    case 'hanfu':
                        this.enterHanfu();
                        break;
                    case 'shop':
                        this.enterShop();
                        break;
                }
            }

            // 更新地图UI
            updateMapUI() {
                if (this.player) {
                    document.getElementById('map-player-health').textContent = this.player.health;
                    document.getElementById('map-player-energy').textContent = this.player.energy;
                    document.getElementById('map-player-gold').textContent = this.playerGold;
                    document.getElementById('map-current-floor').textContent = this.currentFloor;
                }
            }

            // 返回地图
            returnToMap() {
                this.showMap();
            }

            // 添加战斗日志
            addBattleLog(message) {
                this.battleLog = this.battleLog || [];
                this.battleLog.push(message);
                console.log(message);
                this.updateBattleLogDisplay();
            }

            // 更新战斗日志显示
            updateBattleLogDisplay() {
                const logContainer = document.getElementById('battle-log-content');
                if (!logContainer) return;
                
                logContainer.innerHTML = '';
                
                // 只显示最近的20条日志
                const recentLogs = (this.battleLog || []).slice(-20);
                
                recentLogs.forEach(log => {
                    const logElement = document.createElement('div');
                    logElement.className = 'log-entry';
                    
                    // 根据日志内容设置不同的样式
                    if (log.includes('对玩家造成了') || log.includes('攻击')) {
                        logElement.classList.add('enemy-action');
                    } else if (log.includes('使用卡牌') || log.includes('造成') || log.includes('获得')) {
                        logElement.classList.add('player-action');
                    } else if (log.includes('回合开始') || log.includes('回合结束')) {
                        logElement.classList.add('turn-start');
                    } else {
                        logElement.classList.add('system');
                    }
                    
                    logElement.textContent = log;
                    logContainer.appendChild(logElement);
                });
                
                // 滚动到底部
                logContainer.scrollTop = logContainer.scrollHeight;
            }

            startBattle() {
                this.gameState = 'battle';
                this.currentEnemies = [this.createEnemy()];
                this.addBattleLog(`=== 第 1 回合开始 ===`);
                this.drawHand();
                this.updateUI();
                this.updateBattleDisplay();
            }

            createEnemy() {
                const enemies = [
                    { name: '数学考试', health: 60, maxHealth: 60, damage: 8, description: '一道复杂的数学题' },
                    { name: '语文考试', health: 60, maxHealth: 60, damage: 8, description: '一篇深奥的古文' },
                    { name: '英语考试', health: 60, maxHealth: 60, damage: 8, description: '一篇英语阅读理解' }
                ];
                return enemies[Math.floor(Math.random() * enemies.length)];
            }

            drawHand() {
                const handSize = this.player.maxHandSize;
                const cardsToDraw = handSize - this.playerHand.length;
                
                for (let i = 0; i < cardsToDraw; i++) {
                    if (this.playerDeck.length === 0) {
                        this.reshuffleDeck();
                    }
                    
                    if (this.playerDeck.length > 0) {
                        this.playerHand.push(this.playerDeck.pop());
                    }
                }
                
                this.addBattleLog(`抽牌: 获得 ${cardsToDraw} 张卡牌`);
                this.updateHandDisplay();
            }

            // 重新洗牌
            reshuffleDeck() {
                if (this.playerDiscardPile.length > 0) {
                    this.playerDeck = [...this.playerDiscardPile];
                    this.playerDiscardPile = [];
                    this.shuffleDeck();
                    this.addBattleLog('弃牌堆重新洗入抽牌堆');
                }
            }

            // 弃牌
            discardCard(card) {
                const cardIndex = this.playerHand.indexOf(card);
                if (cardIndex > -1) {
                    this.playerHand.splice(cardIndex, 1);
                    this.playerDiscardPile.push(card);
                    this.addBattleLog(`弃牌: ${card.name}`);
                }
            }

            // 消耗卡牌
            exhaustCard(card) {
                const cardIndex = this.playerHand.indexOf(card);
                if (cardIndex > -1) {
                    this.playerHand.splice(cardIndex, 1);
                    this.playerExhaustPile.push(card);
                    this.addBattleLog(`消耗: ${card.name}`);
                }
            }

            updateUI() {
                if (this.player) {
                    document.getElementById('player-health').textContent = this.player.health;
                    document.getElementById('player-energy').textContent = this.player.energy;
                    document.getElementById('player-gold').textContent = this.playerGold;
                    document.getElementById('current-floor').textContent = this.currentFloor;
                }
            }

            updateHandDisplay() {
                const handContainer = document.getElementById('player-hand');
                if (!handContainer) return;
                
                handContainer.innerHTML = '';
                
                this.playerHand.forEach((card, index) => {
                    const cardElement = document.createElement('div');
                    cardElement.className = 'card';
                    cardElement.innerHTML = `
                        <div class="card-cost">${card.cost}</div>
                        <div class="card-name">${card.name}</div>
                        <div class="card-description">${card.description}</div>
                    `;
                    cardElement.addEventListener('click', () => {
                        this.useCard(card);
                    });
                    handContainer.appendChild(cardElement);
                });
            }

            updateBattleDisplay() {
                const enemyContainer = document.getElementById('enemy-container');
                if (!enemyContainer) return;
                
                enemyContainer.innerHTML = '';
                
                this.currentEnemies.forEach(enemy => {
                    const enemyElement = document.createElement('div');
                    enemyElement.className = 'enemy';
                    enemyElement.innerHTML = `
                        <div class="enemy-name">${enemy.name}</div>
                        <div class="enemy-health">生命: ${enemy.health}/${enemy.maxHealth}</div>
                        <div class="enemy-intent">准备攻击</div>
                    `;
                    enemyContainer.appendChild(enemyElement);
                });
            }

            useCard(card) {
                if (this.player.energy < card.cost) {
                    this.addBattleLog(`能量不足！需要${card.cost}点能量，当前只有${this.player.energy}点`);
                    return;
                }

                this.player.energy -= card.cost;
                this.addBattleLog(`使用卡牌: ${card.name} (消耗${card.cost}能量)`);

                if (card.type === 'attack') {
                    this.dealDamage(card.damage);
                } else if (card.type === 'defend') {
                    this.player.block = (this.player.block || 0) + card.block;
                    this.addBattleLog(`获得${card.block}点护甲`);
                } else if (card.type === 'energy') {
                    // 能量类卡牌
                    this.player.energy += card.energy || 0;
                    this.addBattleLog(`获得${card.energy || 0}点能量`);
                }

                // 卡牌进入弃牌堆
                this.discardCard(card);

                // 立即更新所有显示
                this.updateUI();
                this.updateHandDisplay();
                this.updateBattleDisplay();
            }

            dealDamage(damage) {
                if (this.currentEnemies.length > 0) {
                    const target = this.currentEnemies[0];
                    target.health -= damage;
                    
                    // 确保血量不会低于0
                    if (target.health < 0) {
                        target.health = 0;
                    }
                    
                    this.addBattleLog(`对 ${target.name} 造成了 ${damage} 点伤害`);
                    
                    // 立即更新战斗显示
                    this.updateBattleDisplay();
                    
                    if (target.health <= 0) {
                        this.defeatEnemy(target);
                    }
                }
            }

            defeatEnemy(enemy) {
                this.addBattleLog(`击败了 ${enemy.name}！`);
                this.playerGold += 25;
                this.currentEnemies = this.currentEnemies.filter(e => e !== enemy);
                
                if (this.currentEnemies.length === 0) {
                    this.battleVictory();
                }
            }

            battleVictory() {
                this.addBattleLog('战斗胜利！获得25金币');
                this.playerGold += 25;
                this.currentFloor++;
                
                // 解锁下一层
                if (this.currentFloor <= this.mapNodes.length) {
                    this.mapNodes[this.currentFloor - 1].forEach(node => {
                        this.availableNodes.add(node.id);
                    });
                }
                
                this.returnToMap();
            }

            endTurn() {
                this.addBattleLog(`=== 第 ${this.battleTurn + 1} 回合结束 ===`);
                
                // 敌人行动
                this.currentEnemies.forEach(enemy => {
                    if (enemy.health > 0) {
                        this.player.health -= enemy.damage;
                        this.addBattleLog(`${enemy.name} 对玩家造成了 ${enemy.damage} 点伤害`);
                    }
                });
                
                // 重置玩家状态
                this.player.energy = this.player.maxEnergy;
                this.player.block = 0;
                
                // 手牌进入弃牌堆
                while (this.playerHand.length > 0) {
                    this.playerDiscardPile.push(this.playerHand.pop());
                }
                this.addBattleLog(`手牌进入弃牌堆`);
                
                // 抽牌
                this.drawHand();
                
                this.addBattleLog(`=== 第 ${this.battleTurn + 2} 回合开始 ===`);
                this.updateUI();
                this.updateBattleDisplay();
                
                if (this.player.health <= 0) {
                    alert('游戏结束！');
                    this.restartGame();
                }
            }

            // 进入汉府
            enterHanfu() {
                this.player.health = Math.min(this.player.maxHealth, this.player.health + 30);
                alert('在汉府休息，恢复了30点生命值');
                this.returnToMap();
            }

            // 进入商店
            enterShop() {
                alert('欢迎来到商店！');
                this.returnToMap();
            }

            restartGame() {
                this.currentScreen = 'main-menu';
                this.selectedCharacter = null;
                this.player = null;
                this.currentEnemies = [];
                this.playerHand = [];
                this.playerDeck = [];
                this.playerDiscardPile = [];
                this.playerExhaustPile = [];
                this.playerGold = 0;
                this.currentFloor = 1;
                this.gameState = 'menu';
                
                this.showScreen('main-menu');
                document.getElementById('start-game').disabled = true;
                document.querySelectorAll('.character-card').forEach(card => {
                    card.classList.remove('selected');
                });
            }

            showScreen(screenId) {
                document.querySelectorAll('.screen').forEach(screen => {
                    screen.classList.remove('active');
                });
                const targetScreen = document.getElementById(screenId);
                if (targetScreen) {
                    targetScreen.classList.add('active');
                    this.currentScreen = screenId;
                }
            }
        }

        // 初始化游戏
        const game = new SimpleGame();
        game.init();
    </script>
</body>
</html>
